<template>
  <div>
    <el-row class="row-basic">
      <el-card class="box-card" shadow="never">
        <el-row>
          <el-col>
            <h2>{{userData.name}}</h2>
          </el-col>
          <el-col>
            <el-col :span="12">
              <el-upload
                class="avatar-uploader"
                action="/api/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" id="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-row><h4>登录名：{{userData.loginName}}</h4></el-row>
              <el-row><h4>邮箱：{{userData.email}}</h4></el-row>
            </el-col>
            <el-col :span="12">
              <el-row><h4>电话：{{userData.phone}}</h4></el-row>
              <!--<el-row><h4>手机号：{{userData.mobile}}</h4></el-row>-->
            </el-col>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色" name="role">
          <el-row>
            <h2>角色列表</h2>
            <el-table
              :data="roleList"
              style=" width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="enname"
                label="角色代码"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="角色名称">
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="功能权限" name="menu">
          <el-row>
            <h2>功能权限列表</h2>
            <el-table
              :data="menuList"
              border
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                header-align="center"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
              <table-tree-column
                prop="name"
                header-align="center"
                treeKey="id"
                width="150"
                label="名称">
              </table-tree-column>
              <el-table-column
                header-align="center"
                align="center"
                label="图标">
                <template slot-scope="scope">
                  <icon-svg :name="scope.row.icon || ''"></icon-svg>
                </template>
              </el-table-column>
              <el-table-column
                prop="sort"
                header-align="center"
                align="center"
                label="排序号">
              </el-table-column>
              <el-table-column
                prop="href"
                header-align="center"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="菜单URL">
              </el-table-column>
              <el-table-column
                prop="permission"
                header-align="center"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="授权标识">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="dept">
          <el-row>
            <h2>数据权限列表</h2>
            <el-table
              :data="deptList"
              border
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                header-align="center"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
              <table-tree-column
                prop="name"
                header-align="center"
                treeKey="id"
                width="150"
                label="名称">
              </table-tree-column>
              <el-table-column
                prop="sort"
                header-align="center"
                align="center"
                label="排序号">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>


  </div>

</template>

<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import {treeDataTranslate, handleImg} from '@/utils'

  export default {
    name: 'user-detail',
    components: {
      TableTreeColumn
    },
    data () {
      return {
        activeName: 'role',
        roleList: [],
        menuList: [],
        deptList: [],
        userData: {},
        imageUrl: ''
      }
    },
    methods: {
      init (id) {
        this.$http({
          url: this.$http.adornUrl('/sysUser/query/detail'),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({data}) => {
          console.log(data)
          this.userData = data
          this.imageUrl = data.photo
          handleImg(this.dataForm.photo, 'avatar')
        }).then(() => {
          /**
           * 获取部门信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listDeptByUserId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.deptList = treeDataTranslate(data)
          })
          /**
           * 获取菜单信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listMenuByUserId'),
            // url: this.$http.adornUrl('/sysRole/listMenuIdByRoleId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            // this.menuList = treeDataTranslate(data)
            this.menuList = data
          })

          /**
           * 获取用户角色信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysUser/query/listRoleByUserId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.roleList = data
          })
        })
      },
      handleAvatarSuccess (res, file) {
        console.log('file', file)
        console.log('res', res)
        this.imageUrl = 'api/file/' + res.data.bucketName + '-' + res.data.fileName
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
    },
    created () {
      let id = this.$route.params.id || 0
      console.log(id)
      this.init(id)
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
